<template>
  <div class="home">
    <div
      class="ad"
      :style="{
        backgroundImage: 'url(' + QINIU + 'home_banner_bg.png)',
      }"
    >
      <div class="ad-title">除了中国芯 哪里都一样</div>
      <div class="ad-content">左象全系产品均采用台湾络达芯片</div>
      <div class="ad-item">
        <div class="item-img">
          <img :src="QINIU + 'product1.png'" />
        </div>
        <div class="item-title">2代标准版</div>
      </div>
      <div class="ad-item">
        <div class="item-img">
          <img :src="QINIU + 'product2.png'" />
        </div>
        <div class="item-title">2代升级版</div>
      </div>
      <div class="ad-item">
        <div class="item-img">
          <img :src="QINIU + 'product3.png'" />
        </div>
        <div class="item-title">3代降噪版</div>
      </div>
    </div>
    <div class="product">
      <div class="product-title">最好的材料 只为完美还原</div>
      <div class="product-content">全系产品采用行业内顶尖供应商 详细了解</div>
      <div class="product-content">详细了解 ></div>
      <div class="product-img">
        <img :src="QINIU + 'home_banner1.png'" alt="" />
      </div>
    </div>
    <div class="repair">
      <div class="repair-title">更多保障 支持官方寄修*</div>
      <div class="repair-content">详细了解 ></div>
      <div class="repair-img">
        <img :src="QINIU + 'home_repair.png'" alt="" />
      </div>
    </div>
    <div class="accident">
      <div class="accident-title">意外？嘻嘻 ^_^ 有意外险 不怕！</div>
      <div class="accident-content">详细了解 ></div>
      <div class="accident-pic">
        <img :src="QINIU + 'home_accident.png'" alt="" />
      </div>
      <div class="accident-icon">
        <div class="accident-wrap">
          <div class="accident-item">
            <img :src="QINIU + 'home_accident_icon1.png'" alt="" />
            <div class="item-content">由 Zoang 认证，长达 2 年的售后 服务</div>
          </div>
          <div class="accident-item">
            <img :src="QINIU + 'home_accident_icon2.png'" alt="" />
            <div class="item-content">优先获得技术支持</div>
          </div>
        </div>
        <div class="accident-wrap">
          <div class="accident-item">
            <img :src="QINIU + 'home_accident_icon3.png'" alt="" />
            <div class="item-content">
              获得 12 个月最多两次意外损坏 保修服务
            </div>
          </div>
          <div class="accident-item">
            <img :src="QINIU + 'home_accident_icon4.png'" alt="" />
            <div class="item-content">电池维修服务</div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="recommend"
      :style="{
        backgroundImage: 'url(' + QINIU + 'home_footer_bg.png)',
      }"
    >
      <div class="recommend-title">
        推荐给朋友，为你 <span>豪气</span> 免单！！
      </div>
      <div class="recommend-content">详细了解 ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {};
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.home {
  padding-top: 1.173333rem;
  padding-bottom: 1.573333rem;
  .ad {
    background-size: 100%;
    color: #ffffff;
    .ad-title {
      font-size: 0.72rem;
      text-align: center;
      padding-top: 0.906667rem;
    }
    .ad-content {
      font-size: 0.293333rem;
      text-align: center;
      padding-top: 0.266667rem;
      padding-bottom: 0.96rem;
    }
    .ad-item {
      display: flex;
      align-items: center;
      padding: 0.2rem 1.046667rem;
      img {
        &:nth-of-type(1) {
          width: 3.813333rem;
        }
        &:nth-of-type(1) {
          width: 3.813333rem;
        }
        &:nth-of-type(1) {
          width: 4.8rem;
        }
      }
      .item-title {
        font-size: 0.48rem;
      }
    }
  }
  .product {
    padding: 1.28rem 0.693333rem;
    text-align: center;
    background-color: #f8f8f9;
    .product-title {
      font-size: 0.746667rem;
      color: #292a2d;
      padding-bottom: 0.266667rem;
    }
    .product-content {
      color: #1972aa;
      font-size: 0.346667rem;
      padding-top: 0.4rem;
    }
    .product-img {
      margin-top: 0.8rem;
      padding: 0 0.8rem;
      img {
        width: 100%;
      }
    }
  }
  .repair {
    padding: 1.28rem 0.693333rem;
    text-align: center;
    .repair-title {
      font-size: 0.613333rem;
      color: #292a2d;
      padding-bottom: 0.266667rem;
    }
    .repair-content {
      color: #1972aa;
      font-size: 0.346667rem;
      padding-top: 0.4rem;
    }
    .repair-img {
      padding: 19px;
      img {
        width: 100%;
      }
    }
  }
  .accident {
    padding: 0 0.293333rem;
    text-align: center;
    .accident-title {
      font-size: 0.613333rem;
      color: #292a2d;
      padding-bottom: 0.266667rem;
    }
    .accident-content {
      color: #1972aa;
      font-size: 0.346667rem;
      padding-top: 0.4rem;
    }
    .accident-pic {
      width: 4rem;
      margin: 0 auto;
      margin-top: 1.013333rem;
      img {
        width: 100%;
      }
    }
  }
  .accident-icon {
    .accident-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      .accident-item {
        flex: 1;
        text-align: center;
        color: #33343c;
        padding: 0.533333rem;
        .item-content {
          padding-top: 0.2rem;
          line-height: 0.6rem;
        }
        img {
          width: 1.146667rem;
        }
      }
    }
  }
  .recommend {
    height: 3.786667rem;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    color: #fff;
    .recommend-title {
      font-size: 0.566667rem;
      padding-top: 1.306667rem;
      span {
        font-size: 0.653333rem;
      }
    }
    .recommend-content {
      padding-top: 0.533333rem;
    }
  }
}
</style>